<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from '../utils/mixins/resize.js'

const animationDuration = 6000

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        opinionData: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart(this.opinionData)

        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {

        initChart(data) {
            this.chart = echarts.init(this.$el, 'macarons')
            this.chart.setOption({
                title: {
                    // show: true, //false
                    // text: '每日添加设备折线图', //主标题文本
                    textStyle: {
                        // color: '#ccc', //'red'，字体颜色
                        fontStyle: 'normal', //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
                        fontWeight: 'bold', //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
                        fontFamily: 'sans-serif', //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
                        // 'Microsoft YaHei'(微软雅黑) ，文字字体
                        fontSize: 18, //字体大小
                        lineHeight: 18 //字体行高
                    },
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,//坐标轴两边留白
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                grid: {
                    left: '0%', //默认10%
                    right: '0%', //默认10%
                    bottom: '5%', //默认60
                    top: '5%',
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        itemStyle: {
                            color: '#6092f9'
                        },
                        // 设置圆点大小为5
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(96, 146, 249,0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(96, 146, 249,0.1)'
                                }
                            ])
                        }
                    }
                ]
            })

            this.chart.resize()
        }
    }
}
</script>